<template>
	<view>
		<view class="topsegment2">
			<u-subsection :list="items" :current="current" @change="onClickItem" mode="tabs" active-color="#000"></u-subsection>
		</view>
		<scroll-view scroll-y="true" class="scrollY" v-if="current==0">
			<view class="zpList">
				<div class="zpItem" v-for="(item, index) in videoList" :key="index">
					<!-- <video v-show="!modalOn" :id="'video' + index" @play="videoPlay(index)" class="video" :src="item.src" :autoplay="false" duration="" controls="true" :loop="false" :muted="false" initial-time="true" direction="-90" show-mute-btn="true"></video> -->
					<!-- <image class="shipin" v-show="modalOn" src="../../static/imgs/index/shipin.png">-->
					<view class="videoImg">
						<image class="shipin" :src="'../../static/test/' + (6 + index) + '.png'">
							<view class="video-cover" @click="showVideos">
								<view class="video-cover-play-button"></view>
								<text class="video-cover-duration">06:07</text>
							</view>
					</view>
					<view class="bottomMenu">
						<view class="bfs">播放数 {{item.bofang}}</view>
						<view class="right">
							<view class="r1 flex-center">
								<image class="icon" src="../../static/imgs/index/sy_zan@2x.png">{{item.dianzan}}
							</view>
							<view class="r1 flex-center">
								<image class="icon" src="../../static/imgs/index/sy_pl@2x.png">{{item.pinglun}}
							</view>
							<view class="flex-center">
								<image class="icon" src="../../static/imgs/index/sy_zf@2x.png">
							</view>
						</view>
					</view>
				</div>
			</view>
		</scroll-view>
		<scroll-view scroll-y="true" class="scrollY" v-if="current==1">
			<view class="zpList">
				<div class="zpItem" v-for="(item, index) in videoList" :key="index">
					<!-- <video v-show="!modalOn" :id="'video' + index" @play="videoPlay(index)" class="video" :src="item.src" :autoplay="false" duration="" controls="true" :loop="false" :muted="false" initial-time="true" direction="-90" show-mute-btn="true"></video> -->
					<!-- <image class="shipin" v-show="modalOn" src="../../static/imgs/index/shipin.png">-->
					<view class="videoImg">
						<image class="shipin" :src="'../../static/test/' + (6 + index) + '.png'">
							<view class="video-cover" @click="showVideos">
								<view class="video-cover-play-button"></view>
								<text class="video-cover-duration">06:07</text>
							</view>
					</view>
					<view class="bottomMenu">
						<view class="bfs">播放数 {{item.bofang}}</view>
						<view class="right">
							<view class="r1 flex-center">
								<image class="icon" src="../../static/imgs/index/sy_zan@2x.png">{{item.dianzan}}
							</view>
							<view class="r1 flex-center">
								<image class="icon" src="../../static/imgs/index/sy_pl@2x.png">{{item.pinglun}}
							</view>
							<view class="flex-center">
								<image class="icon" src="../../static/imgs/index/sy_zf@2x.png">
							</view>
						</view>
					</view>
				</div>
			</view>
		</scroll-view>
		<uni-popup ref="searchpopup" type="center" @change="handlerPopupStatusChenge">
			<view id="searchpopup">
				<uni-search-bar class="mysearchBar" radius="100" bgColor="#EEEEEE" placeholder="作品搜索" @confirm="search"/>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue';
	export default {
		components: {uniPopup},
		data() {
			return {
				showSearchPopup: false,
				kouling: '',
				current: 0,
				items: ['热门', '最新'],
				videoList: [{
					src: "https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20181126-lite.m4v",
					bofang: 4567,
					dianzan: 10,
					pinglun: 10
				}, {
					src: 'https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20181126-lite.m4v',
					bofang: '55w',
					dianzan: '23w',
					pinglun: 1000
				}]
			}
		},
		methods: {
			onClickItem: function(e) {
				if (this.current !== e) {
					this.current = e;
				}
			},
			handlerPopupStatusChenge: function(e) {
				this.showSearchPopup = e.show;
			},
			search(res) {
				this.$refs['searchpopup'].close();
			},
			showVideos: function() {
				uni.navigateTo({
					url: '/pages/video/myvideo'
				});
			}
		},
		onBackPress(e) {
			if (this.showSearchPopup) {
				this.$refs['searchpopup'].close();
				return true;
			}
		},
		onNavigationBarButtonTap (e) {
			this.$refs['searchpopup'].open();
		},
		onLoad() {}
	}
</script>

<style lang="scss" scoped>
	.topsegment2 {
		/deep/ .segmented-control__text {
			color: #989898 !important;
		}
	}

	.scrollY {
		// #ifdef APP-PLUS
		height: calc(100vh - 38px);
		// #endif
		// #ifdef H5
		height: calc(100vh - 44px - 38px);

		// #endif
		.innerContent {
			padding: 0 10pt;
			width: calc(100% - 20pt);
		}
	}

	.zpList {
		padding: 10pt;
	
		.zpItem {
			margin-bottom: 15pt;
	
			// border-radius: 10px;
			.shipin {
				width: 100%;
				height: 380rpx;
			}
	
			.video {
				width: 100%;
				height: 380rpx;
				// border-radius: 10px;
				z-index: 1;
	
				video {
					object-fit: cover !important;
					// border-radius: 10px;
				}
	
				&.hidden {
					/deep/ .uni-video-container {
						width: 100%;
						height: 380rpx;
					}
	
					video {
						display: none;
					}
				}
			}
	
			.videoImg {
				position: relative;
				width: 100%;
				height: 380rpx;
				border-radius: 10px;
	
				.shipin {
					border-radius: 10px;
				}
			}
	
			.bottomMenu {
				display: flex;
				height: 40px;
				align-items: center;
				position: relative;
				justify-content: space-between;
				border-bottom: 1px solid #cfcfcf;
	
				.bfs {
					&::before {
						content: '';
						position: absolute;
						width: 16px;
						height: 16px;
						background: url(../../static/imgs/index/sy_bf@2x.png);
						background-size: 100%;
						top: 11px;
						left: 2px;
					}
	
					color: #b9b9b9;
					font-size: 12px;
					text-indent: 20px;
				}
	
				.right {
					display: flex;
	
					.r1 {
						margin-right: 12px;
						font-size: 12px;
						color: #929292;
					}
	
					.icon {
						width: 14px;
						height: 14px;
						margin-right: 3px;
					}
				}
			}
		}
	}
	#searchpopup {
	  background: #fff;
	  width: 300px;
	  border-radius: 10px;
	  height: 40px;
	  position: absolute;
	  left: calc(50% - 150px);
	  top: calc(50% - 20px);
	}
</style>
